<template>
  <div class="user-list-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">用户列表</h1>
    </div>

    <!-- 搜索栏和操作按钮 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-6 mb-6">
      <div class="flex items-center justify-between mb-4">
        <el-input
          v-model="searchText"
          placeholder="搜索用户名称/所属单位/电话号码"
          class="w-96"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search text-neutral-400"></i>
          </template>
        </el-input>

        <div class="flex gap-3">
          <el-button type="primary" @click="goToAddUser">
            <i class="fas fa-plus mr-2"></i>新增用户
          </el-button>
          <el-button @click="batchDelete">
            <i class="fas fa-trash mr-2"></i>批量删除
          </el-button>
          <el-button color="#1890ff" plain class="!border-primary-500 !text-primary-500 hover:!bg-primary-50">
            <i class="fas fa-user mr-2"></i>个人空间
          </el-button>
        </div>
      </div>
    </div>

    <!-- 用户表格 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm overflow-hidden">
      <el-table
        :data="filteredUsers"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '500' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="userId" label="用户id" width="100" align="center" />
        <el-table-column prop="username" label="用户名称" width="120" />
        <el-table-column prop="role" label="用户角色" width="120">
          <template #default="{ row }">
            <el-tag :type="getRoleType(row.role)" size="small">
              {{ row.role }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话号码" width="140" />
        <el-table-column prop="department" label="所属单位" width="120" />
        <el-table-column prop="creator" label="创建人" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="modifier" label="修改人" width="100" />
        <el-table-column prop="modifyTime" label="修改时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="editUser(row)">
              详情
            </el-button>
            <el-button type="danger" size="small" @click="deleteUser(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex justify-center py-4 border-t border-neutral-200 dark:border-neutral-700">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, sizes, jumper"
          :total="users.length"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const selectedUsers = ref([])

// 模拟用户数据
const users = ref([
  { id: 1, userId: 111, username: '是是是', role: '管理员', phone: '13366664444', department: 'jrlc', creator: '张三', createTime: '2023-10-05 14:32:35', modifier: '李四', modifyTime: '2023-10-05 14:32:35' },
  { id: 2, userId: 222, username: '对对对', role: '审核员', phone: '13366664444', department: 'jrlc', creator: '张三', createTime: '2023-10-05 14:32:35', modifier: '李四', modifyTime: '2023-10-05 14:32:35' },
  { id: 3, userId: 333, username: '啊啊啊', role: '普通用户', phone: '13366664444', department: 'jrlc', creator: '张三', createTime: '2023-10-05 14:32:35', modifier: '李四', modifyTime: '2023-10-05 14:32:35' },
  { id: 4, userId: 444, username: '哈哈哈', role: '普通用户', phone: '13366664444', department: 'jrlc', creator: '张三', createTime: '2023-10-05 14:32:35', modifier: '李四', modifyTime: '2023-10-05 14:32:35' },
  { id: 5, userId: 555, username: '呢呢呢', role: '普通用户', phone: '13366664444', department: 'jrlc', creator: '张三', createTime: 'xxxx-xx-xx', modifier: '李四', modifyTime: 'xxxx-xx-xx' }
])

const filteredUsers = computed(() => {
  let result = users.value
  if (searchText.value) {
    result = result.filter(user => 
      user.username.includes(searchText.value) ||
      user.department.includes(searchText.value) ||
      user.phone.includes(searchText.value)
    )
  }
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return result.slice(start, end)
})

const getRoleType = (role) => {
  const roleTypes = {
    '管理员': 'danger',
    '审核员': 'warning',
    '普通用户': ''
  }
  return roleTypes[role] || ''
}

const handleSelectionChange = (selection) => {
  selectedUsers.value = selection
}

const goToAddUser = () => {
  router.push('/users/add')
}

const editUser = (row) => {
  router.push({ path: '/users/profile', query: { userId: row.userId } })
}

const deleteUser = (row) => {
  ElMessageBox.confirm(`确定要删除用户 "${row.username}" 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = users.value.findIndex(u => u.id === row.id)
    if (index > -1) {
      users.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {})
}

const batchDelete = () => {
  if (selectedUsers.value.length === 0) {
    ElMessage.warning('请先选择要删除的用户')
    return
  }
  ElMessageBox.confirm(`确定要删除选中的 ${selectedUsers.value.length} 个用户吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    selectedUsers.value.forEach(user => {
      const index = users.value.findIndex(u => u.id === user.id)
      if (index > -1) {
        users.value.splice(index, 1)
      }
    })
    ElMessage.success('批量删除成功')
    selectedUsers.value = []
  }).catch(() => {})
}
</script>

<style scoped>
.user-list-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-table__row) {
  transition: background-color 0.3s;
}

:deep(.el-button) {
  transition: all 0.3s;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>

